<template>
  <div class="itemview" v-if="itemlist">
    <div class="head" >
      <span @click="quit"> <img src="../assets/img/fhui.png" alt="" /></span >
      <h1>{{list.name}}</h1>
    </div>
    <div class="headnav" >
      <!-- 遮罩层 -->
      <div class="overlay" @click="block" v-show="i" >
        <div class="img">
          <img :src="indexurl" alt="" />
        </div>
      </div>
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        offset-top="50"
        line-width="0"
        z-index="200"
      >
        <van-tab :title="'商品'">
          <div class="showcontent">
            <div class="banner">
              <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
              >
                <van-swipe-item v-for="i in list.banner" :key="i.id">
                  <div class="img" @click="show(i.id)">
                    <img :src="i.bannerurl" alt="" />
                  </div>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="showtext">
              <div class="showtext_content">
                <div class="texthead">
                  <h2>&yen;{{ list.price }}</h2>
                  <p>满88元包邮</p>
                </div>
                <h4>{{ list.name }}</h4>
                <p @click="test">{{ list.Description }}</p>
              </div>
            </div>
             <cartover @over='over' :flag='flag' @none='none' :list='list'></cartover>
            <div class="showverion" @click="over()">
              <div class="shwoverion_content" >
                <h6>已选版本</h6>
                <p>
                  颜色:<span>{{ list.color }}</span>
                </p>
                <p v-show="list.Version">
                  容量: <span>{{list.Version }}</span>
                </p>
                <p>
                  数量:<span>{{ list.num }}</span>
                </p>
              </div>
            </div>
            <div class="showserve">
              <div class="showserve_content">
                <h6>服务说明</h6>
                <div class="top">
                  <div class="top_one">
                    <img src="../assets/img/wuliu.png" alt="" />
                    <span> 无理由7天退货 </span>
                  </div>
                  <div class="top_two">
                    <img src="../assets/img/sofo.png" alt="" />
                    <span> 15天质量问题换货 </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'评价 '">
          <div class="showevaluation">
            <div class="showevaluation_content">
              <h6>用户评价</h6>
              <p>
                {{
                  list.Evaluation == null
                    ? "该用户没填写评价"
                    : "item.Evaluation"
                }}
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'详情 '">
          <h6 class="syt">商品详情</h6>
          <div class="showetails">
            <div class="img" v-for="(t, index) in list.Details" :key="index">
              <img :src="t.Detailsurl" alt="" />
            </div>
          </div>
        </van-tab>
        <van-tab :title="'推荐 '">
          <div class="showrecommended">
            <h2>相关推荐</h2>
            <ul>
              <li v-for="c in list.Recommended" :key="c.id">
                <div class="img">
                  <img :src="c.url" alt="" />
                </div>
                <div class="commended">
                  <p>{{ c.name }}</p>
                  <h4>{{ c.REvaluation }}</h4>
                  <h3>&yen;{{ c.price }}.00</h3>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="buy">
       <div class="box">
           <div class="img">
               <img src="../assets/img/10.png" alt="">
           </div>
           <div class="img">
               <img src="../assets/img/11.png" alt="">
           </div>
           <div class="but" @click="join">
              加入购物车
           </div>
       </div>
    </div>
  </div>
</template>

<script>
import cartover from "../components/CartoverCom.vue";
export default {
  props: ["itemlist"],
  data() {
    return {
      active: 0,
      list: null,
      i: false,
      indexurl: null,
      itemindex: null,
      flag:false,
      obj:null,
      id:null,
    };
  },
  methods: {
    test() {
      // console.log(this.itemlist);
    },
    show(id) {
      this.i = true;
      var index = this.itemlist[this.itemindex].item.banner.findIndex(
        (item) => id == item.id
      );
      this.indexurl = this.itemlist[this.itemindex].item.banner[index].bannerurl;
    },
    block() {
      this.i = false;
    },
    quit(){
      this.$router.go(-1)
    },
    over(){
     this.flag=true
    },
    //加入购物车
    join(){
       this.flag=false
      var value=window.localStorage.getItem('token')
       if (value) {
          this.$router.push('/cart')
          window.localStorage.setItem('btindex',3)
       }
       else{
         this.$router.push('/login')

       }

   
    this.$emit('join',{list:this.list,id:this.id});
      
    },
    none(bolen){
      this.flag=bolen
    }
  },
  created() {
    var index = this.itemlist.findIndex(
      (item) => item.id == this.$route.query.id
    );
    // 将详情页的数据添加购物车
    this.itemindex = index;
    this.id=this.$route.query.id
    this.list = this.itemlist[this.itemindex].item;
  },
  components:{
    cartover
  }
};
</script>

<style lang="scss" >
.itemview {
  width: 100%;
  .head {
    height: 50px;
    display: flex;
    border-bottom: 1px solid #dfdede;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    background-color: #fff;
    span {
      display: block;
      width: 20px;
      height: 20px;
      margin: 15px 20px;
      img {
        width: 20px;
      }
    }
    h1 {
      font-size: 18px;
      line-height: 50px;
      flex: 1;
      text-align: center;
      padding-right: 15%;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 700;
    }
  }
  .headnav {
    width: 100%;
    border-bottom: 4px solid #dbdbdb;
    z-index: 55;
    .showcontent {
      .banner {
        margin-top: 50px;
        width: 100%;
        border-bottom: 4px solid #dbdbdb;
        .img {
          width: 100%;
          text-align: center;
          img {
            width: 80%;
            display: block;
            margin: 0 auto;
          }
        }
      }
      .showtext {
        width: 100%;
        height: 120px;
        border-bottom: 4px solid #dbdbdb;
        .showtext_content {
          width: 90%;
          margin: 0 auto;
          .texthead {
            display: flex;
            justify-content: space-between;
            height: 40px;
            line-height: 40px;
            padding: 10px 0;
            h2 {
              color: #d44d44;
              font-weight: 700;
            }
          }
          h4 {
            padding: 3px 0;
            color: #333;
            font-weight: 700;
          }
          p {
            color: #7f7f7f;
            font-size: 12px;
          }
        }
      }
      .showverion {
        width: 100%;

        border-bottom: 4px solid #dbdbdb;
        .shwoverion_content {
          width: 90%;
          margin: auto;

          h6 {
            color: #999;
            font-size: 14px;
            padding: 5px 0;
          }
          p {
            padding: 8px 0;
            color: #333;
            span {
              font-weight: 700;
              font-size: 16px;
            }
          }
        }
      }
      .showserve {
        width: 100%;
        border-bottom: 4px solid #dbdbdb;
        .showserve_content {
          width: 90%;
          margin: auto;
          h6 {
            color: #666;
            font-size: 16px;
            padding: 5px 0;
            font-weight: 600;
          }
          .top {
            display: flex;
            padding: 10px 0;
            padding-top: 30px;
            .top_one,
            .top_two {
              display: flex;
              margin-right: 20px;
              span {
                display: block;
                font-size: 12px;
              }
              img {
                display: block;
                width: 16px;
                height: 16px;
              }
            }
          }
        }
      }
    }
    .showevaluation {
      width: 100%;
      border-bottom: 4px solid #dbdbdb;
      .showevaluation_content {
        width: 90%;
        margin: auto;
        h6 {
          color: #666;
          font-size: 16px;
          padding: 5px 0;
          font-weight: 600;
        }
        p {
          padding-top: 40px;
          padding-bottom: 10px;
          color: rgb(153, 153, 153);
          font-size: 14px;
        }
      }
    }
    .syt {
      color: #666;
      font-size: 16px;
      padding: 10px 0;
      font-weight: 600;
      width: 90%;
      margin: 0 auto;
    }
    .showetails {
      width: 100%;
      border-bottom: 4px solid #dbdbdb;

      .img {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    .showrecommended {
      width: 100%;
      h2 {
        width: 90%;
        margin: 0 auto;
        color: #999;
        font-size: 16px;
        padding: 5px 0;
        font-weight: 700;
      }
      ul {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 50%;
          .img {
            width: 100%;
            img {
              width: 100%;
            }
          }
          .commended {
            width: 90%;
            margin: 0 auto;
            P {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #333;
              font-size: 14px;
              font-weight: 700;
            }
            h4 {
              color: #7f7f7f;
              font-size: 10px;
              padding-top: 10px;
              padding-bottom: 7px;
            }
            h3 {
              color: #d44d44;
              font-weight: 700;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  //遮罩层
  .overlay {
    height: 100%;
    width: 100%;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    .img {
      width: 100%;
      height: 375px;
      position: absolute;
      top: 20%;
      background-color: beige;
      img {
        width: 100%;
      }
    }
  }
  .buy{
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    .box{
      width: 90%;
      margin: 0 auto;
      display: flex;
      .img{
         width: 12%;
         margin-top: 5px;
         img{
          width: 30px;
          height: 30px;
         }
      }
      .but{
         flex: 1;
         height: 30px;
         background-color: rgb(254, 211, 38);
         margin: 5px auto;
         border-radius: 10px;
         text-align: center;
         line-height: 30px;
         color: white;
         font-weight: 700;
         font-size: 14px;
      }
    }
  }
}
.van-tabs .van-sticky {
  width: 100%;
  //   height: 50px;
}
.van-tabs .van-tab--active {
  background-color: rgb(176, 176, 176);
  color: white;
  font-weight: 600;
  font-size: 16px;

  margin-top: 8px;
  width: 25%;
  border-radius: 2px;
  border: 1px solid dfdede;
}
.van-tab {
  background-color: rgb(255, 255, 255);
  border: 1px solid dfdede;
  border-radius: 2px;
  font-weight: 600;
  font-size: 16px;
  width: 20%;
  color: black;
  margin-top: 8px;
}
.my-swipe .van-swipe-item {
  background-color: #fff;
}
</style>